<template>
	<view class="seach">
		<view class="top" v-if="top" @tap="backtop">
			<img src="../../static/top.png" alt="" />
		</view>
		<view class="index_seach">
			<view class="index_input">
				<img class="seach_img" src="../../static/seach.png" alt="" srcset="" />
				<input @confirm="seach" v-model="names" type="text" placeholder="请输入作者名字" placeholder-class="pla" />
			</view>

		</view>
		<view class="chaodai">
			<view class="left">
				<span class="shu"></span>
				<span class="title">朝代：</span>
				<view class="item">
					<span @click="select(index,item.id)" v-for="(item,index) in dynastys"
						:class="[tab==index?'actives1':'']">{{item.name}}</span>

				</view>


			</view>

		</view>

		<view class="hot_poetry hot_author">
			<view class="" >
				<div class="poetry" v-for="(item,index) in authors" @click="details(item.name,item.desc,item.id)">
					<div class="title">{{item.name}}</div>
					<div class="content">
						{{item.desc}}
					</div>
				</div>
				<view class="more">
					<span>{{moreText}}</span>
				</view>
			</view>



		</view>
	</view>
</template>

<script>
import { authors } from '../../api';
	export default {
		data() {
			return {
				authors: [],
				moreText: '加载完成',
				tab: 0,
				names:'',
				top: false,
				dynastys: [],
				pageNum: 0,
				totalPage:0,
				authors_id:""
			}

		},
		onShareAppMessage(res) {
				wx.showShareMenu({
				     withShareTicket: true,
				     menus: ['shareAppMessage', 'shareTimeline']
				    })
				return{
						title:this.info.title,
						imageUrl:'https://www.leedong.top/img/11556.png',
						
				}
				
				},
				//2.分享到朋友圈
		onShareTimeline(){
		
			return {
				title:this.info.title,
				imageUrl:'https://www.leedong.top/img/11556.png',
				
				
			}
		},
		onLoad() {
			this.getDynastys()
		},
		onReachBottom(){
			this.getAuthors()
		},

		methods: {
			seach(){
				this.$api.authorseach({author_name:this.names}).then((res)=>{
					 this.authors = res.rows
				})
			},
		details(name,desc,id){
			let obj={
				name:name,
				desc:desc,
				id:id
			}
			uni.navigateTo({
				url:'/pages/authorsdetail/index?obj='+JSON.stringify(obj)
			})
			
		},
			select(v, id) {
				this.pageNum=0;
				this.tab = v;
				this.authors=[]
				this.totalPage=10
				this.authors_id=id;
				this.getList(this.authors_id)
			},
			getDynastys() {
				this.$api.dynastys({}).then((res) => {
					this.dynastys = res.rows;
					this.getList(res.rows[0].id)
				})
			},
			async getList(id){
				const data = await this.$api.authors({
					authorId: id,
					pageNumber: 1,
					pageSize: 20
				});
				this.totalPage = Math.ceil(data.total / 10);
			    this.authors = data.rows
			},
			async getAuthors() {
				this.pageNum += 1;
				this.moreText = '加载中...'
				if (this.pageNum >= this.totalPage) {
					this.moreText = '已加载全部'
					return;
				}
				const data = await this.$api.authors({
					authorId: this.authors_id,
					pageNumber: this.pageNum,
					pageSize: 20
				});
				this.totalPage = Math.ceil(data.total / 10);
				this.authors = this.authors.concat(data.rows)
			},
			backtop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100,
				});
			},
			onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
				if (e.scrollTop > 100) { //当距离大于10时显示回到顶部按钮
					this.top = true
				} else {
					this.top = false
				}
			}
		}
	}
</script>

<style lang="scss">
	.seach {
		.index_seach {
			height: 50px;
			width: 100%;
			background-color: #7d8468;
			.index_input {
				width: 97%;
				height: 50px;
				margin: auto;
				display: flex;
				align-items: center;
				position: relative;

				input {
					height: 28px;
					border-radius: 20px;
					width: 100%;
					background-color: #fff;
					padding-left: 25px;
					font-size: 14px;
				}

				.seach_img {
					width: 32px;
					position: absolute;
					height: 32px;
				}

				.pla {
					padding-left: 30px;
					font-size: 14px;
				}

			}
		}

		.chaodai {
			width: 100%;
			display: flex;
			margin-top: 20px;
			border-bottom: 1px solid #f5f5f5;

			.left {
				height: 60px;

				.shu {
					height: 25px;
					display: inline-block;
					margin-left: 10px;
					width: 5px;
					vertical-align: middle;
					background-color: #7d8468;
				}

				.title {
					padding-left: 6px;

				}

				.item {
					display: inline;

					span {
						padding: 5px;
						text-align: center;

						display: inline-block;
					}

					.actives1 {
						border-bottom: 3px solid #7d8468;



					}
				}
			}
		}

		.hot_poetry {
			margin-top: 10px;

			.poetry {
				width: 95%;
				margin: auto;
				border-bottom: 1px solid #f5f5f5;
				margin-bottom: 10px;
				margin-top: 20px;
				height: 113px;
				
				.title {
					color: #7d8468;
				}

				.author {
					font-size: 13px;
					color: #9a8383;
					padding: 10px;
				}

				.content {
					font-size: 14px;
					padding-bottom: 20px;
					color: #716363;
					height: 40px;

					display: -webkit-box;
					/* 将元素设置为弹性布局 */
					overflow: hidden;
					/* 隐藏溢出部分 */
					text-overflow: ellipsis;
					/* 显示省略号 */
					white-space: normal !important;
					/* 保持换行 */
					word-wrap: break-word;
					/* 自动换行 */
					-webkit-line-clamp: 3;
					/* 限制显示两行 */
					-webkit-box-orient: vertical;
					/* 垂直排列子项目 */
					-webkit-box-pack: center;
					/* 居中对齐子项目 */




				}
			}

			.more {
				text-align: center;

				span {
					font-size: 12px;
					color: #9a8383;
				}
			}
		}



		.top {
			position: fixed;
			bottom: 20px;
			right: 5px;
			z-index: 1000;

			img {
				width: 32px;
				height: 32px;
			}
		}
	}
</style>